import React, { useState } from 'react';
import Calendar from './components/Calendar';
import EventForm from './components/EventForm';

const App = () => {
  const [events, setEvents] = useState([]);
  const [selectedEvents, setSelectedEvents] = useState([]);
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [showEventForm, setShowEventForm] = useState(false);
  const [showEventPopup, setShowEventPopup] = useState(false);

  const getEventsForDate = (date) => {
    return events.filter(event => {
      const eventDate = new Date(event.date);
      return eventDate.toDateString() === date.toDateString();
    });
  };

  const handleSaveEvent = (newEvent) => {
    const updatedEvents = [...events, newEvent];
    setEvents(updatedEvents);
    setShowEventForm(false);
    
    const newEventDate = new Date(newEvent.date);
    if (newEventDate.toDateString() === selectedDate.toDateString()) {
      setSelectedEvents(getEventsForDate(selectedDate));
    }
  };

  const handleCancelEvent = () => {
    setShowEventForm(false);
  };

  const handleSelectEvents = (events) => {
    setSelectedEvents(events);
  };

  return (
    <div className="app">
      <h1>日程管理</h1>
      <Calendar 
        events={events} 
        onSelectEvents={handleSelectEvents}
        selectedDate={selectedDate}
        onSelectDate={setSelectedDate}
      />
      <div className="selected-events">
        <div className="selected-date-header">
          <h3>{selectedDate.toLocaleDateString('zh-CN')} 日程</h3>
          <button 
            className="add-event-btn"
            onClick={() => setShowEventForm(true)}
          >
            添加日程
          </button>
        </div>
        {selectedEvents.length === 0 ? (
          <p className="no-events">暂无日程</p>
        ) : (
          selectedEvents.map((event, index) => (
            <div key={index} className="event-item">
              <p>{event.title}</p>
              <p>{event.startTime} - {event.endTime}</p>
            </div>
          ))
        )}
      </div>
      
      {showEventForm && (
        <div className="event-form-overlay" onClick={handleCancelEvent}>
          <div onClick={e => e.stopPropagation()}>
            <EventForm
              onSave={handleSaveEvent}
              onCancel={handleCancelEvent}
              selectedDate={selectedDate}
            />
          </div>
        </div>
      )}
    </div>
  );
};

export default App; 